Day 9 先停下來整理了一下 Prompt 怎麼寫，今天就拿來真的做功能。
目前首頁已經有一個：

 + 新增任務

但它還只是按鈕。
所以今天的目標很明確：
讓「新增任務」真的可以點進去、填表單，然後把資料送回 Flask。
今天還是不接 MySQL。
先把：

 首頁
  ↓
新增任務頁面
  ↓
填寫表單
  ↓
POST
  ↓
Flask 收到資料

這條流程跑通。

先把今天的需求講清楚

這次我沒有只跟 Claude Code 說：

幫我做新增任務功能。

而是把範圍講清楚：

目前狀態：

- Flask 首頁已經可以正常開啟
- 首頁已有「新增任務」按鈕
- 目前只有靜態 UI
- 還沒有接 MySQL
- 還沒有真正的 CRUD

今天只做「新增任務」第一版。

需求：

1. 點擊首頁的「新增任務」按鈕後，
   進入新的新增任務頁面

2. 表單需要：
   - 任務名稱
   - 說明
   - 狀態
   - 分類
   - 截止日期

3. 使用 Flask route 處理頁面

4. 表單送出後，
   先把收到的資料印在終端機或暫時顯示出來即可

5. 今天不要接 MySQL

6. 不要做修改、刪除、篩選或其他功能

請先告訴我：
- 需要新增哪些檔案
- 需要修改哪些檔案
- 每個修改的原因

如果有不清楚的地方先問我，
不要自行擴大功能範圍。

先規劃，不要直接修改。

Claude Code 接著問我一個問題：

分類欄位在還沒接 MySQL 的情況下要怎麼處理？

它給了兩個方向：

我選：

1. 下拉選單

等後面接上 categories 資料表，再改成從 MySQL 讀取。

Claude Code 這次做了哪些檔案？

這次主要動到三個地方：

app.py
templates/index.html
templates/add_task.html

style.css 也有沿用 Day 8 的樣式。
目前專案大概是：

ai-task-manager/
├── app.py
├── requirements.txt
│
├── templates/
│   ├── index.html
│   └── add_task.html
│
├── static/
│   └── css/
│       └── style.css
│
└── venv/

這次沒有建立：

db.py
models/
services/
routes/

也沒有碰 MySQL。

新增任務頁面

Claude Code 做出來的新增任務頁面有：

• 任務名稱
• 說明
• 狀態
• 分類
• 截止日期
• 新增任務按鈕

目前分類先使用固定選項：
這些之後才會改成真正的分類資料。

表單怎麼送資料？

add_task.html 裡的表單：

<form class="task-form" method="POST" action="{{ url_for('new_task') }}">

這裡有兩個重點。
method="POST" 代表送出資料。
action="{{ url_for('new_task') }}" 則代表資料要送到 new_task 這個 Flask route。
表單欄位像這樣：

<input type="text" id="title" name="title" required>

<select id="status" name="status">
    <option value="待處理">待處理</option>
    <option value="進行中">進行中</option>
    <option value="已完成">已完成</option>
</select>

<select id="category" name="category">
    <option value="學習">學習</option>
    <option value="專案">專案</option>
    <option value="生活">生活</option>
</select>

Flask 之後就是靠這些 name 拿到資料。

app.py 新增了什麼？

原本 app.py 只有首頁：

@app.route("/")
def index():
    return render_template("index.html")

這次多了一個：

@app.route("/tasks/new", methods=["GET", "POST"])
def new_task():

所以現在：

/tasks/new

是新增任務頁面。
其中：

GET

負責開啟頁面，

POST

負責接收表單資料。

Flask 怎麼拿到表單內容？

app.py 這次多匯入：

request

當表單送出後，程式會執行：

if request.method == "POST":

接著把資料整理成：

submitted_task = {
    "title": request.form.get("title", ""),
    "description": request.form.get("description", ""),
    "status": request.form.get("status", ""),
    "category": request.form.get("category", ""),
    "due_date": request.form.get("due_date", ""),
}

例如 HTML 裡：

name="title"

會對應：

request.form.get("title")

所以欄位名稱要一致。

submitted_task 是拿來做什麼？

new_task() 一開始會先寫：

submitted_task = None

第一次進頁面時還沒有資料，所以它先是空的。
送出表單後，submitted_task 才會變成剛剛輸入的內容。
最後：

return render_template(
    "add_task.html",
    submitted_task=submitted_task
)

會把資料再傳回 HTML。

Jinja2 這次又多一種寫法

Day 8 已經看過：

{{ url_for(...) }}

這種 {{ ... }} 是用來輸出值。
這次又看到：

{% if submitted_task %}

這種 {% ... %} 可以拿來做條件判斷。
目前 add_task.html 裡有：

{% if submitted_task %}
<section class="submitted-preview">
    ...
</section>
{% endif %}

意思是：

有送出資料
→ 顯示預覽

沒有資料
→ 不顯示

表單送出後會發生什麼？

目前還沒有資料庫。
所以送出後，Claude Code 做了兩件事。
第一個是把收到的資料印到終端機：

print("收到新任務：", submitted_task)

從畫面可以看到：

收到新任務: {
    'title': '測試',
    'description': '測試',
    'status': '待處理',
    'category': '學習',
    'due_date': '2026-09-24'
}

下面的：

POST /tasks/new HTTP/1.1" 200

表示表單資料已經成功送到 /tasks/new，而且 Flask 有正常回應。
現在可以確認一件事：

HTML 表單
    ↓
  POST
    ↓
	Flask
    ↓
request.form

這條流程已經跑通。
第二個則是把 submitted_task 再傳回 add_task.html，讓頁面顯示剛剛送出的內容。

Windows 多了一段 UTF-8 設定

這次 app.py 最前面還有：

import sys

以及：

sys.stdout.reconfigure(
    encoding="utf-8",
    errors="replace",
    line_buffering=True
)

這是因為我現在是在 Windows 上操作。
有些 Windows 終端機的預設編碼在 print() 中文時可能出現問題。
這段主要是讓終端機能正常輸出中文，跟 Flask route 本身沒有直接關係。

為什麼回首頁後看不到剛新增的任務？

因為今天還沒有資料庫。
目前只是：

HTML 表單
    ↓
  POST
    ↓
Flask 收到資料

資料沒有真的存進任何地方。
所以回首頁後，還是不會看到剛新增的任務。
這也是下一步要處理的問題。

今天做到這裡

Day 10 已經有第一個可以操作的功能。
現在我可以：

從首頁進入新增任務
        ↓
     填寫表單
        ↓
       送出
        ↓
   Flask 收到資料
        ↓
在頁面和終端機看到結果

但資料還沒有真正保存。
所以下一篇就要開始處理資料庫。